import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// 引入 vue-router
import VueRouter from 'vue-router'

// 安装插件
Vue.use(VueRouter)

// 引入 一级组件
import UIRouter from './views/UIRouter.vue'
import Contacts from './views/Contacts.vue'
import About from './views/About.vue'

// 引入 二级组件
import AllContacts from './views/second/AllContacts.vue'
import Alice from './views/second/Alice.vue'
import Bob from './views/second/Bob.vue'

// 引入 三级组件
import Blog from './views/second/three/Blog.vue'
import Fax from './views/second/three/Fax.vue'


// 创建路由规则
let routes = [
  {
    path: '/',
    redirect: '/uirouter' 
  },
  {
    path: '/uirouter',
    component: UIRouter
  },
  {
    path: '/contacts',
    component: Contacts,
    children: [
      {
        name: 'Allcontacts',
        path: 'allcontacts',
        component: AllContacts
      },
      {
        name: 'Alice',
        path: 'alice',
        component: Alice
      },
      {
        name: 'Bob',
        path: 'bob',
        component: Bob,
        children: [
          {
            path: 'blog',
            component: Blog
          },
          {
            path: 'fax',
            component: Fax
          }
        ]
      },
    ]
  },
  {
    path: '/about',
    component: About
  },
]

// 根据路由规则创建路由对象
let router = new VueRouter({
  routes
})

// 将路由对象挂载到 new Vue 实例的配置对象中
new Vue({
  render: h => h(App),
  router
}).$mount('#app')
